"use client";
import { setPinYinCookieClient } from "@/lib/utils";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import React, { useEffect } from "react";
import PinyinSwitch from "../PinyinSwitch";

export default function Header() {
  //   const headersList = headers();
  //   const currentPath = (await headersList).get("x-invoke-path"); // 获取当前路径，如 /poem
  //   console.log(currentPath);

  const pathname = usePathname();
  const router = useRouter();
  const [cookieShowPinyin, setCookieShowPinyin] = React.useState(false);
  const navigation = [
    { title: "首页", href: "/" },
    { title: "诗词", href: "/poem" },
    { title: "诗人", href: "/poet" },
  ];
  const togglePinyin = () => {
    const currentValue = document.cookie.includes('pinyin=1');
    setPinYinCookieClient(!currentValue);
    router.refresh(); // 刷新页面
  };
  useEffect(() => {
    setCookieShowPinyin(!document.cookie.includes('pinyin=1'))
  },[])

  return (
    <div className="py-4 px-6 bg-[#21293b] sticky top-0">
      <div className="flex items-center justify-between mx-auto">
        <span className="font-extrabold text-2xl">诗韵</span>
        <div className="link flex space-x-4">
        <PinyinSwitch showPinyin={cookieShowPinyin} onChange={togglePinyin} />
          {navigation.map((item, index) => (
            <Link
              key={index}
              href={item.href}
              className={`px-3 py-2 ${
                (pathname==='/'&&item.href==='/') || (item.href !=='/'&&pathname.includes(item.href))
                  ? "text-green-400 p-[4px] rounded-[4px] bg-[#ffffff10]" // 当前页样式
                  : "text-white" // 其他页样式
              } transition-all duration-200 text-xl box-border`}
            >
              {item.title}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}
